<template>
    <div class="login-wrap">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-container">
            <h1 class="title">登录</h1>
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="loginForm.username" placeholder="用户名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="密码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%;" @click="doSubmit('loginForm')">登录</el-button>
            </el-form-item>
            <el-row style="text-align: center;">
                <el-link type="primary" @click="gotoForget()" class="bottom">忘记密码</el-link>
                <el-link type="primary" @click="gotoRegister()" class="bottom">用户注册</el-link>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import user from "@/utils/user"
/* import { store } from "@/utils/store"; */
import store from '@/store/index'
import { jwtDecode } from "jwt-decode";

export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }

        };
    },
    methods: {
        gotoRegister() {
            this.$router.push('/register');
        },
        gotoForget() {
            this.$router.push('/forget');
        },
        doSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let userInfo = {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    }

                    user.login(userInfo).then(res => {
                        if (res.data.code === 1) {
                            alert('登录成功!');
                            /* store.loginUser(res.data.data); */
                            store.commit('setToken',res.data.data)
                            const decoded = jwtDecode(res.data.data);
                            store.commit('setUser',decoded)
                            console.log(decoded.name);
                            console.log(JSON.parse(localStorage.getItem('user')));
                            this.$router.push('/home');
                            console.log(res.message);
                        }
                        else {
                            alert(res.data.msg);
                            console.log(res.message);
                        }

                    }).catch(e => {
                        alert('用户名或密码错误!');
                        console.log(e.message);
                    })

                } else {
                    console.log('登陆失败!!');
                    return false;
                }
            });
        }

    }

}
</script>

<style>
.login-wrap {
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url("../../assets/David.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

.bottom {
    width: 50%;
    height: 100%;
    text-align: center;

}

@media screen and (max-width: 800px) {
    .bottom {
        width: 100%;
        height: 50%;
    }

    .login-container {
        width: 250px;
    }
}
</style>